<template>
  <p-form-model ref="ruleForm" layout="inline" :model="form" :rules="rules">
    <div class="connect">
      <div class="connect_form">
        <p-form-model-item label="事项编号" prop="matterNo" style="width: 100%">
          <span class="from-input">{{ form.matterNo }}</span>
        </p-form-model-item>
        <p-form-model-item label="拜访编号" prop="visitNo" style="width: 100%">
          <a @click="visitDetail(form.visitNo)">{{ form.visitNo }}</a>
        </p-form-model-item>
        <p-form-model-item
          label="线索名称"
          prop="leadsName"
          style="width: 100%"
        >
          <!-- <span class="from-input">
            {{ form.leadsName }}
          </span> -->
          <a @click="leadsDetail(form.leadsNo)">{{ form.leadsName }}</a>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item label="处理状态" prop="state" style="width: 100%">
          <span class="from-input">
            {{ stateOptions[form.state] }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="拜访名称"
          prop="visitName"
          class="form-item"
          style="width: 100%"
        >
          <span class="from-input">
            {{ form.visitName }}
          </span>
        </p-form-model-item>
        <p-form-model-item
          label="商机名称"
          prop="opportunityName"
          style="width: 100%"
        >
          <!-- <span class="from-input">
            {{ form.opportunityName }}
          </span> -->
          <a @click="opportunityDetail(form.opportunityNo)">
            {{ form.opportunityName }}
          </a>
        </p-form-model-item>
      </div>
    </div>
    <p-form-model-item
      label="主题"
      prop="topic"
      class="form-item"
      style="width: 100%"
    >
      <span class="from-input">
        {{ form.topic }}
      </span>
    </p-form-model-item>
    <p-form-model-item
      label="详情"
      prop="remark"
      class="form-item remark"
      style="width: 100%"
    >
      <span class="from-input">
        {{ form.remark }}
      </span>
    </p-form-model-item>
    <div class="connect2">
      <div class="connect_form">
        <p-form-model-item
          label="处理人"
          prop="currentUserName"
          style="width: 100%"
        >
          <span class="from-input">{{ form.currentUserName }}</span>
        </p-form-model-item>
        <p-form-model-item
          label="创建人"
          prop="createUserName"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createUserName }}</span>
        </p-form-model-item>

        <p-form-model-item
          label="创建时间"
          prop="createTime"
          style="width: 100%"
        >
          <span class="from-input">{{ form.createTime }}</span>
        </p-form-model-item>
      </div>
      <div class="connect_form">
        <p-form-model-item
          label="处理人部门"
          prop="currentDepartmentName"
          style="width: 100%"
        >
          <span class="from-input">{{ form.currentDepartmentName }}</span>
        </p-form-model-item>
        <p-form-model-item label="创建人部门" style="width: 100%">
          <span class="from-input">{{ form.createDepartmentName }}</span>
        </p-form-model-item>
      </div>
    </div>
  </p-form-model>
</template>

<script>
import { postBusinessTableList } from '@/api/visit.js';
import monent from 'moment';

export default {
  components: {},
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      headers: {
        authorization: 'authorization-text',
      },
      isload: false,
      fileList: [],
      list: [],
      customerName: '',
      opportunityDataSource: [],
      visibleLegalNo: false,
      parentId: '',
      hasAll: false,
      visibleCustomer: false,
      visibleOpportunity: false,
      visibleModelName: false,
      isDetail: false,
      updateUserGroup: '',
    };
  },
  computed: {
    typeOptions() {
      return this.$store.state.dictionary.dict['agreement_type'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['matter_type'] || {};
    },
  },
  watch: {
    form: {
      handler(val) {
        console.log('val: ', val);
        const attachmentList = val.attachmentList;
        console.log('attachmentList: ', attachmentList);
        if (attachmentList !== undefined) {
          if (attachmentList.length) {
            attachmentList.forEach((item) => {
              this.list.push({
                atthName: item.atthName,
                atthAccessPath: item.atthAccessPath,
                id: item.id,
              });
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    opportunityDetail(opportunityNo) {
      const routeUrl = this.$router.resolve({
        path: '/business-follow',
        query: {
          opportunityNo: opportunityNo,
        },
      });
      window.open(routeUrl.href);
    },
    leadsDetail(leadsNo) {
      const routeUrl = this.$router.resolve({
        path: '/clue-follow',
        query: {
          leadsNo: leadsNo,
        },
      });
      window.open(routeUrl.href);
    },
    async searchOpportunity() {
      const data = {
        current: 1,
        pageSize: 10,
        customerShortName: this.form.customerName,
      };
      if (this.form.customerName !== '') {
        this.visibleOpportunity = true;
        const result = await postBusinessTableList(data);
        this.opportunityDataSource = result?.data?.data?.records;
      } else {
        this.$message.error('请选择客户名称后点击商机编号');
      }
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },

    // handleDeadLineOk(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    // handleDeadLineChange(value) {
    //   const formatTime = monent(value).format('YYYY-MM-DD 23:59:59');
    //   this.form.orderTime = formatTime;
    // },
    changeLegalNo(value) {
      this.form.legalNo = value?.label || '';
    },
    changeCustomer(val) {
      this.form.customerName = val?.label || '';
      this.form.customerCode = val?.key || '';
    },
    changeOpportunity(val) {
      this.form.opportunityNo = val?.key || '';
      this.form.opportunityName = val?.label || '';
    },
    changeModelName(val) {
      this.form.modelName = val?.label || '';
    },
    changeHandle(val) {
      this.form.salesGroup = val;
    },
    visitDetail(val) {
      const routeUrl = this.$router.resolve({
        path: '/visit-info',
        query: {
          visitNo: val,
        },
      });
      window.open(routeUrl.href);
    },
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.connect {
  width: 100%;
  display: flex;
  justify-content: center;
}
.connect2 {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.connect_form {
  width: 49%;
  display: inline-block;
}
// .from-input {
//   width: 320%;
// }
.row {
  margin-top: 20px;
}
/deep/ .poros-form-item {
  margin-bottom: 20px;
}
/deep/ .poros-form-item-label {
  width: 90px !important;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 250px);
}
.load {
  margin-top: 50px !important;
}
.form-item {
  position: relative;
  .copy-clue {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(110%, -25%);
  }
  .searchIcon {
    position: absolute;
    top: 0;
    right: 5px;
  }
}
.disinput {
  background-color: #fff;
  cursor: default;
  color: #000;
  width: 85%;
  margin-right: 2%;
}
.isremark {
  width: 100%;
  margin-left: 12px;
  height: 60px;
}
.remark {
  width: 100%;
  margin-left: 12px;
}
// /deep/ .poros-upload-list {
//   display: inline-block;
// }
/deep/ .poros-upload-list-item {
  margin-left: 100px;
}
/deep/ .anticon {
  margin-left: 5px;
}
.container {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
  margin-top: 40px;
}
/deep/ .poros-row {
  height: 32px;
}
.remark {
  width: 100%;
  margin-left: 12px;
  height: auto;
}
</style>